<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>积分商城</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<!--App标准自定义的css-->
		<link rel="stylesheet" href="css/activity.css" />
		<link rel="stylesheet" href="css/shoppingMall.css" />
		<!--App默认样式-->
		<link rel="stylesheet" href="css/default.css" />
		<!--引人jquery-->
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/nav.js"></script>
	</head>

	<body>
		<!--搜索框-->
		<div class="mui-input-row mui-search">
		    <input type="search" class="mui-input-clear searchItp" placeholder="搜索">
		</div
		<!--banner图-->
		<div class="shopBanner">
			<p class="integral">现有积分<i>5800</i></p>
		</div>
		<!--轮播图-->
            <div class="mui-slider">
                <!--轮播图片-->
                <div class="mui-slider-group mui-slider-loop">
                    <!--支持循环，需要重复图片节点-->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="image/item2.png" />
                        </a>
                    </div>  
                    
                     <div class="mui-slider-item">
                        <a href="#">
                            <img src="image/item3.png" />
                        </a>
                    </div>
                     <div class="mui-slider-item">
                         <a href="#">
                             <img src="image/item1.png" />
                         </a>
                     </div>
                     <div class="mui-slider-item">
                        <a href="#">
                            <img src="image/item2.png" />
                        </a>
                    </div>
                    
                        <!--支持循环，需要重复图片节点-->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                         <a href="#">
                             <img src="image/item3.png" />
                         </a>
                     </div>
                </div>
                
                <!--显示圆点-->
                <div class="mui-slider-indicator">
                     <div class="mui-indicator mui-active"></div>
                     <div class="mui-indicator"></div>
                </div>
            </div>
            <!--商品列表-->
            <div class="productList">
            	<div class="productList-item">
            		<img src="image/product2.png" />
            		<span class="product-title">现代简约实木椅</span>
            	   <span class="product-botton">
            			<p>1222积分</p>
            			<button>兑换</button>
            		</span>
            	</div>
            	<div class="productList-item">
            		<img src="image/product1.png" />
            		<span class="product-title">国行正品iPhone X</span>
            		<span class="product-botton">
            			<p>1222积分</p>
            			<button>兑换</button>
            		</span>
            	</div>
            	<div class="productList-item">
            		<img src="image/product3.png" />
            		<span class="product-title">高级托运行李箱</span>
            		<span class="product-botton">
            			<p>1222积分</p>
            			<button>兑换</button>
            		</span>
            	</div>
            	<div class="productList-item">
            		<img src="image/product4.png" />
            		<span class="product-title">简约时尚男士表</span>
            		<span class="product-botton">
            			<p>12222222222积分</p>
            			<button>兑换</button>
            		</span>
             	</div>
             	
             	
            </div>
            	<!--导航-->
	 <div class="bottonNav nav-cont" id="navCont">
            	<a href="index.html" class="nav-cont-itme" >
            		<img src="icon/shouye.png" class="navImg"/>
            		<span>首页</span>
            	</a>
            	<a href="activity.html" class="nav-cont-itme" >
            		<img src="icon/huodong.png" class="navImg"/>
            		<span>活动</span>
            	</a>
            	<a href="gameCenter.html" class="nav-cont-itme" >
            		<img src="icon/youxi.png" class="navImg"/>
            		<span>游戏</span>
            	</a>
            	<a href="shoppingMall.html" class="nav-cont-itme" >
            		<img src="icon/shangcheng.png" class="navImg"/>
            		<span>商城</span>
            	</a>
            	<a href="inforCenter.html" class="nav-cont-itme" >
            		<img src="icon/wode.png" class="navImg"/>
            		<span>我的</span>
            	</a>
            </div>
            <div class="sated"></div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
				mui.init({
                swipeBack:false //启用右滑关闭功能
            });
      	//轮播图
      	var gallery = mui('.mui-slider');
					gallery.slider({
					  interval:1000//自动轮播周期，若为0则不自动播放，默认为0；
					});
		</script>
	</body>

</html>